<template>
  <div class="container">
    <div class="detailCard">
      <div class="card">
        <div class="left">配送品类</div>
        <div class="right">{{appData.category?appData.category.name:""}}</div>
      </div>
      <div class="card">
        <div class="left">配送客户</div>
        <div class="right">{{appData.createUser?appData.createUser.name:"暂无记录"}}</div>
      </div>
      <div class="card">
        <div class="left">配送数量</div>
        <div class="right">{{appData.quantity||0}}</div>
      </div>
      <div class="card">
        <div class="left">配送时间</div>
        <div class="right">{{appData.deliveryDate||"暂无记录"}}</div>
      </div>
      <div class="card">
        <div class="left">是否加急</div>
        <div class="right">{{appData.urgentStr}}</div>
      </div>
      <div class="card">
        <div class="left">配送状态</div>
        <div class="right">{{appData.status||"暂无记录"}}</div>
      </div>
      <div class="card">
        <div class="left">配送金额</div>
        <div class="right">{{appData.cost||0}}</div>
      </div>
    </div>
    <div class="detailRow" style="background: #fff;margin-top: 20px;">
      <div>补单数量</div>
      <van-stepper min="1" v-model="postData.quantity" @change="onChange" />
    </div>
    <div class="detailCard">
      <van-field
        autosize
        label="补单备注"
        input-align="right"
        class="shoppingDetail"
        @change="remarkChange"
        :value="postData.remark"
        type="textarea"
        placeholder="输入配送备注"
      />
    </div>
    <div class="buttonArea">
      <div class="allocation back" @click="supplementSheet">提交补单</div>
    </div>
  </div>
</template>

<script>
import { formatTime } from "@/utils/index";
import card from "@/components/card";
import { getMsgDetail, supplementSheet } from "@/http";
import store from "@/utils/factory.js";

export default {
  components: {
    card
  },

  data() {
    return {
      appData: {},
      postData: {},
      assign: false,
      columns: [],
      userId: "",
      userName: "",
      showDialog: false
    };
  },
  methods: {
    getMsgDetail() {
      let self = this;
      getMsgDetail({ id: store.get("msgId") }).then(res => {
        this.appData = res.data;
        this.postData.quantity = res.data.quantity;
        if (this.appData.cost == -1) {
          this.appData.cost = "时价";
        }
        if (this.appData.urgent) {
          this.appData.urgentStr = "是";
        } else {
          this.appData.urgentStr = "否";
        }
      });
    },
    supplementSheet() {
      this.postData.id = this.appData.id;
      let quantity = this.postData.quantity - this.appData.quantity;
      supplementSheet({
        id: this.appData.id,
        remark: this.postData.remark,
        quantity: quantity
      }).then(res => {
        mpvue.showModal({
          title: "成功",
          showCancel: false,
          content: "补单成功",
          success: function(res) {
            if (res.confirm) {
              mpvue.navigateBack({
                delta: 1
              });
            }
          }
        });
      });
    },
    tel: function(phone) {
      mpvue.makePhoneCall({
        phoneNumber: phone
      });
    },
    onChange(e) {
      this.postData.quantity = e.mp.detail;
    },
    remarkChange(e) {
      this.postData.remark = e.mp.detail;
    },
    back() {
      mpvue.navigateBack({
        delta: 1
      });
    }
  },
  onShow() {
    this.getMsgDetail();
  },
  mounted() {},
  created() {}
};
</script>

<style>
.card {
  display: flex;
  font-size: 28rpx;
  background: #fff;
  position: relative;
  border-bottom: 1px solid #eeeeee;
  align-items: center;
}
.left {
  flex: 1;
}
.right {
  color: #a4a4a4;
}

.detailRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 30rpx;
  position: relative;
}

.detailRow::after {
  position: absolute;
  box-sizing: border-box;
  -webkit-transform-origin: center;
  transform-origin: center;
  content: " ";
  pointer-events: none;
  top: auto;
  right: 0;
  bottom: 0;
  left: 15px;
  border-bottom: 1px solid #eee;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
}

.back {
  background: #ffc300;
  color: #222222 !important;
}

.deleteButton {
  flex: 1;
  text-align: center;
  background: #ee0a24;
  line-height: 50px;
}

.allocation {
  background: #ffc300;
  text-align: center;
  line-height: 100rpx;
  width: 320px;
  border-radius: 80rpx;
}

.buttonArea {
  display: flex;
  color: #fff;
  border-radius: 40rpx;
  justify-content: center;
  position: fixed;
  bottom: 80rpx;
  left: 0;
  right: 0;
}
</style>
